<!--  -->
<template>
  <div class="category-container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 内容主体 -->
    <el-card class="box-card">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-button type="primary" @click="addedCate.addCateDialogVisible = true" size="small">添加分类</el-button>
        </el-col>
      </el-row>
      <zk-table
        ref="ZKTableRef"
        index-text="#"
        :data="cateList"
        :columns="treeTable.columns"
        :stripe="treeTable.props.stripe"
        :border="treeTable.props.border"
        show-row-hover
        :show-index="treeTable.props.showIndex"
        is-fold
        :selection-type="treeTable.props.selectionType"
        :expand-type="treeTable.props.expandType"
        class="cate-content"
      >
        <template slot="effective" slot-scope="scope">
          <i
            class="el-icon-success"
            v-if="scope.row.cat_deleted === false"
            style="color: lightgreen"
          ></i>
          <i class="el-icon-error" v-else style="color: red"></i>
        </template>
        <template slot="level" slot-scope="scope">
          <el-tag
            type="primary"
            v-if="scope.row.cat_level === 0"
          >{{ scope.row.cat_level === 0?'一':''}}级</el-tag>
          <el-tag
            type="success"
            v-else-if="scope.row.cat_level === 1"
          >{{ scope.row.cat_level === 1?'二':''}}级</el-tag>
          <el-tag type="danger" v-else>{{ scope.row.cat_level === 2?'三':''}}级</el-tag>
        </template>
        <template slot="manipulate" slot-scope="scope">
          <el-row>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="updateCateDialog(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="deleteCateConfirm(scope.row.cat_id)"
            ></el-button>
          </el-row>
        </template>
      </zk-table>
      <!-- 分页信息 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="queryInfo.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="cate-page"
      ></el-pagination>
    </el-card>
    <!-- 添加分类对话框 -->
    <el-dialog
      title="添加新分类"
      :visible.sync="addedCate.addCateDialogVisible"
      width="50%"
      @close="resetCateForm('addedCateRef')"
    >
      <!-- 内容主体 -->
      <el-form
        :model="addedCate.addedCateForm"
        :rules="addedCate.addedCateFormRules"
        ref="addedCateRef"
        label-width="100px"
      >
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addedCate.addedCateForm.cat_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <el-cascader
            v-model="addedCate.parentCate"
            :clearable="true"
            :options="addedCate.parentCateList"
            :props="addedCate.casProps"
            @change="handleCasChange"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button plain @click="addedCate.addCateDialogVisible = false">取消</el-button>
        <el-button plain @click="resetCateForm('addedCateRef')">重置</el-button>
        <el-button type="primary" @click="addCate('addedCateRef')">提交</el-button>
      </span>
    </el-dialog>
    <!-- 修改分类对话框 -->
    <el-dialog
      title="修改分类"
      :visible.sync="updatedCate.updateCateDialogVisible"
      width="50%"
      @close="resetCateForm('updatedCateRef')"
    >
      <!-- 内容主体 -->
      <el-form
        :model="updatedCate.updatedCateForm"
        :rules="updatedCate.updatedCateFormRules"
        ref="updatedCateRef"
        label-width="100px"
      >
        <el-form-item label="原分类名称" prop="cat_name">
          <el-input v-model="updatedCate.originCateForm.cat_name" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="新分类名称" prop="cat_name">
          <el-input v-model="updatedCate.updatedCateForm.cat_name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button plain @click="updatedCate.updateCateDialogVisible = false">取消</el-button>
        <el-button plain @click="resetCateForm('updatedCateRef')">重置</el-button>
        <el-button type="primary" @click="updateCate('updatedCateRef')">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 商品分类数据列表
      cateList: [],
      total: 0,

      // 查询对象
      queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      // 树形表格对象
      treeTable: {
        props: {
          stripe: true,
          border: true,
          showIndex: true,
          selectionType: false,
          expandType: false
        },
        columns: [
          {
            label: '分类名称',
            prop: 'cat_name'
          },
          {
            label: '是否有效',
            type: 'template',
            template: 'effective'
          },
          {
            label: '分类等级',
            type: 'template',
            template: 'level'
          },
          {
            label: '操作',
            type: 'template',
            template: 'manipulate'
          }
        ]
      },
      addedCate: {
        addCateDialogVisible: false,
        addedCateForm: {
          cat_name: '',
          cat_pid: 0,
          cat_level: 0
        },
        addedCateFormRules: {
          cat_name: [
            { required: true, message: '分类名称不能为空', trigger: 'blur' }
          ]
        },
        parentCateList: [],
        parentCate: [],
        casProps: {
          value: 'cat_id',
          label: 'cat_name',
          children: 'children',
          expandTrigger: 'hover',
          checkStrictly: 'false'
        }
      },
      updatedCate: {
        updateCateDialogVisible: false,
        originCateForm: {},
        updatedCateForm: {},
        updatedCateFormRules: {
          cat_name: [
            { required: true, message: '分类名称不能为空', trigger: 'blur' }
          ]
        }
      }
    }
  },

  created() {
    this.getCateList()
    this.getParentCateList()
  },

  methods: {
    // 获取商品分类数据列表
    getCateList() {
      this.axios.get('categories', { params: this.queryInfo }).then(resp => {
        if (resp.meta.status !== 200) {
          return this.$message.error('获取商品分类列表失败')
        }
        this.cateList = resp.data.result
        this.total = resp.data.total
        this.$message.success({ message: '获取角色列表成功', duration: 500 })
      })
    },
    // 重置添加分类对话框数据
    resetCateForm(cate) {
      this.$refs[cate].resetFields()
      if (cate === 'addedCateRef') {
        this.addedCate.parentCate = []
        this.addedCate.addedCateForm.cat_level = 0
        this.addedCate.addedCateForm.cat_pid = 0
      } else if (cate === 'updatedCateRef') {
        this.updatedCate.originCateForm = {}
        this.updatedCate.updatedCateForm = {}
      }
    },
    // 添加分类
    addCate(cate) {
      this.$refs[cate].validate(valid => {
        if (!valid) {
          // 校验失败
          return this.$message.error('格式不正确，请重新输入')
        }
        // 校验成功
        this.axios
          .post('categories', this.addedCate.addedCateForm)
          .then(resp => {
            if (resp.meta.status !== 201) {
              return this.$message.error('获取商品分类列表失败')
            }
            this.getCateList()
            this.$message.success({
              message: '获取角色列表成功',
              duration: 500
            })
            this.addedCate.addCateDialogVisible = false
          })
      })
    },
    // 修改分类对话框
    updateCateDialog(cate) {
      this.updatedCate.originCateForm = { ...cate }
      this.updatedCate.updatedCateForm = cate
      this.updatedCate.updateCateDialogVisible = true
    },
    // 修改分类
    updateCate(cate) {
      this.$refs[cate].validate(valid => {
        if (!valid) {
          // 校验失败
          return this.$message.error('格式不正确，请重新输入')
        }
        // 校验成功
        this.axios
          .put(`categories/${this.updatedCate.updatedCateForm.cat_id}`, {
            cat_name: this.updatedCate.updatedCateForm.cat_name
          })
          .then(resp => {
            if (resp.meta.status !== 200) {
              return this.$message.error('获取商品分类列表失败')
            }
            this.getCateList()
            this.$message.success({
              message: '获取角色列表成功',
              duration: 500
            })
            this.updatedCate.updateCateDialogVisible = false
          })
      })
    },
    // 删除分类确认框
    deleteCateConfirm(cateId) {
      // 删除确认
      this.$confirm('此操作将会永久删除该分类，确定要删除吗', 'Warning', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 确认删除，执行删除操作
          this.axios.delete(`categories/${cateId}`).then(resp => {
            if (resp.meta.status !== 200) {
              return this.$message.error('删除用户失败')
            }
            // 成功删除，重新获取数据
            this.getCateList()
            this.$message.success('成功删除用户')
          })
        })
        .catch(() => {
          // 取消删除
          this.$message.info('已取消删除')
        })
    },
    // 当前页显示分类条目改变
    handleSizeChange(val) {
      this.queryInfo.pagesize = val
      this.getCateList()
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.queryInfo.pagenum = val
      this.getCateList()
    },
    // 获取分类ID列表
    getParentCateList() {
      this.axios.get('categories', { params: { type: 2 } }).then(resp => {
        if (resp.meta.status !== 200) {
          return this.$message.error('获取商品分类列表失败')
        }
        this.addedCate.parentCateList = resp.data
        // this.total = resp.data.total
        // this.$message.success({ message: '获取角色列表成功', duration: 500 })
      })
    },
    // 父级分类级联选择项改变
    handleCasChange(val) {
      if (val) {
        this.addedCate.addedCateForm.cat_level = val.length
        this.addedCate.addedCateForm.cat_pid = val[val.length - 1]
      }
    }
  },

  components: {}
}
</script>

<style lang='scss' scoped>
.category-container {
  .cate-content {
    margin: 10px 0;
  }
  .el-cascader {
    width: 100%;
  }
}
</style>
